<template>
  <div class="main-pwd">
    <div class="form">
      <el-form  ref="form" :rules="rule" label-position="right" label-width="80px" :model="userMap">
                <el-form-item label="原密码" prop="pwd">
                    <el-input placeholder="请输入原密码" v-model="userMap.pwd"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="nPwd">
                    <el-input placeholder="请输入新密码" v-model="userMap.nPwd"  ></el-input>
                </el-form-item>
      </el-form>
    </div>
    
    <div class="btn">
      <el-button type="primary" size="mini" plain @click="ok_handler">确认</el-button>
    </div>

  </div>
</template>
<script>
import { modify_pwd } from '@/api/user_api'
import { AES_Encrypt } from '@/util/aes'

export default{
  data(){
    return{
      userMap:{
        id:1,
        pwd:"",
        nPwd:""
      },
      rule:{
          pwd:[
            {required:true,message:'原密码不可为空',trigger:'blur'}
          ],
          nPwd:[
            {required:true,message:'新密码不可为空',trigger:'blur'},
          ]
      },
    }
  },
  methods:{
    ok_handler(){
      this.$refs['form'].validate(async (valid)=>{
        if(valid){
          this.userMap.pwd = AES_Encrypt(this.userMap.pwd)
          this.userMap.nPwd = AES_Encrypt(this.userMap.nPwd)
          const res = await modify_pwd(this.userMap)
          this.$message({
            type:res.data.code==200?'success':'error',
            message:res.data.message
          })
          if(res.data.code==200){
            this.$router.push("/index")
            localStorage.clear()
            this.userMap = {
              id:"",
              pwd:"",
              nPwd:""
            }
          }
          
        }else{
          return false;
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.main-pwd{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80%;
  .form{
    margin-top: 10%;
    width: 60%;
  }
  .btn{
    margin-top: 5%;
  }
}
</style>